<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12306登录页</title>
    <link rel="stylesheet" href="./../CSS样式声明表/12306-page2.css">
</head>
<body>
    <div id="box1"><!-- 登录页 -->
        <div id="box2"><!-- 左半部分 -->
            <h1 id="txt1">国铁12306</h1>
            <h2 id="txt2">认真守护你的每一趟旅程</h2>
            <svg t="1648890064708"   id="img1" viewBox="0 0 4697 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="46342" width="200" height="200"><path d="M4682.25493 656.10674a316.453764 316.453764 0 0 0-94.810052-114.22594c-19.668043-13.616337-103.131147-62.282135-180.038237-105.652691 2.26939 2.773698 0 5.043088-12.607719 7.060323a584.746038 584.746038 0 0 1-108.930698 0c-47.65718-2.521544-111.704396-7.312477-169.952061-14.3728a632.403219 632.403219 0 0 1-140.702152-30.510682 1354.825555 1354.825555 0 0 1-126.077197-54.717503c-48.161489-23.198204-151.292636-67.577377-196.428272-86.741112s-137.424144-54.717503-199.958434-77.663553-79.680788-27.484829-188.359332-60.012745a1751.212262 1751.212262 0 0 0-224.41741-47.657181 1560.835695 1560.835695 0 0 1 194.158883 36.562387 2851.109726 2851.109726 0 0 1 378.23159 122.79919c178.777465 70.855385 245.346225 103.131147 320.23608 136.415527a641.732931 641.732931 0 0 0 163.648201 47.909334c19.668043 2.521544 117.503947 12.103411 145.997394 12.859875s77.159244 4.286625 103.88761 3.025852 30.510682-3.782316 31.01499-7.816786a32.780071 32.780071 0 0 0-11.346948-10.842639c-38.075313-21.180969-70.60323-39.083931-87.749728-47.405026-23.702513-11.599102-87.24542-44.379173-172.473606-85.480339 20.67666 16.64219 0 12.859874-7.816786 12.355565l-236.772975-11.094793c-14.877109 0-105.148382-5.547397-123.555653-9.834022a360.580782 360.580782 0 0 1-50.430878-20.424505l-176.508076-75.646318c-40.092549-16.894344-93.297126-32.527917-112.208705-41.353321a35.301615 35.301615 0 0 1-25.215439-23.702513 36.562387 36.562387 0 0 1 25.215439-35.301615c25.215439-14.3728 41.857629-17.650808 95.566515-19.668043a514.394962 514.394962 0 0 1 100.861758 10.590485 1285.987406 1285.987406 0 0 0-521.959595-60.2649 2743.187645 2743.187645 0 0 0-598.614529 114.982403c-39.336085 11.851256-466.989936 151.292636-562.304298 181.046855L48.665798 924.651169l-47.909335 99.348831h4470.697394s-38.579622-54.717503-33.536534-77.663553 81.193715-50.430879 131.876748-85.732494a387.561303 387.561303 0 0 0 100.861757-88.254038 131.876748 131.876748 0 0 0 26.728366-70.351075 176.508075 176.508075 0 0 0-15.129264-45.8921z m-1107.71425-372.432039c30.006373 11.851256 121.034109 50.430879 151.292636 63.542907l48.917952 21.433124a3.530162 3.530162 0 0 1 2.773699 3.782316c0 2.773698-5.043088 3.278007-11.346948 3.025852l-95.818669-4.790933c-20.172351 0-68.333841-5.547397-75.646318-6.30386s-71.107539-16.894344-89.766964-20.928815-100.861757-25.215439-120.025492-29.502064-54.465349-13.616337-57.491201-14.624954a6.30386 6.30386 0 0 1-5.295243-5.043088c0-2.26939 2.017235-2.773698 12.355566-3.782316l80.94156-6.808169c25.215439-2.017235 82.958795-6.556014 97.331596-7.312477a112.713014 112.713014 0 0 1 61.777826 7.312477zM3058.632791 135.660072a14.3728 14.3728 0 0 1 12.103411-2.269389l54.213195 10.33833c19.415888 3.782316 79.932943 16.894344 164.404664 41.605475s168.18698 54.465349 183.568399 60.517054 2.26939 13.112028-4.034471 13.364183l-27.989137 2.26939c-9.834021 0-50.430879 4.538779-66.56876 6.051705l-98.088059 10.33833a208.783838 208.783838 0 0 1-50.430879 0c-10.842639 0-26.728366-5.295242-33.788689-6.808169l-67.073068-13.868491a39.336085 39.336085 0 0 1-25.21544-7.816786 100.861757 100.861757 0 0 1-11.094793-19.920197 624.082124 624.082124 0 0 1-28.745601-66.56876l-5.799551-17.902962a9.581867 9.581867 0 0 1 4.538779-9.329713zM1866.951128 493.215002s398.151787-98.340213 459.677459-112.713014a2000.340802 2000.340802 0 0 1 294.012023-43.370555c97.58375-5.043088 264.509959-14.3728 428.662469 34.545151s263.249187 123.807807 320.992542 205.001522c0 0-179.786082-8.825404-233.494968-11.094793s-232.738505-6.051705-315.949455-3.278007-204.245059 8.321095-301.072345 18.155116-228.704035 29.754218-348.477372 50.430879S96.575133 956.674777 96.575133 956.674777z m1797.860825 151.292636s-400.925485-20.424506-484.38859-23.450359-318.975308-11.094793-482.875663-2.269389-285.943082 21.180969-413.533205 39.58824-1966.804268 266.275039-1966.804268 266.275039l2011.68775-302.585272c63.038598-9.581867 162.639584-22.441741 223.408792-26.98052s164.15251-11.599102 229.712653-13.112029 208.027375-3.782316 329.565792 0 214.331234 7.816786 293.003405 14.372801a350.746761 350.746761 0 0 0-91.784199-111.704396 735.030057 735.030057 0 0 0-302.585272-141.206461 1074.934179 1074.934179 0 0 0-288.716781-22.693895 1639.003557 1639.003557 0 0 1 182.055472-8.825404 1039.632564 1039.632564 0 0 1 246.606997 33.032226 1216.392794 1216.392794 0 0 1 226.938954 84.219567c71.107539 33.788689 189.115795 96.827287 209.288147 107.92208s103.88761 52.952423 138.93707 68.081687a946.083284 946.083284 0 0 0 130.86813 47.909334z" p-id="46343" fill="#13227a"></path></svg>
            <a href="./自制12306首页.html">【回到首页】</a>
        </div>
        <div id="box3"><!-- 右半部分 -->
            <h2 id="txt3">登录</h2>
            <button id="btn1">注册</button>
            <button id="btn2">登录</button>
            <input type="text"     id="input1" placeholder="请输入账号">
            <input type="password" id="input2" placeholder="请输入密码">
            <a>选择其他登录方式</a>
            <svg t="1648883750791" id="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10616" width="40" height="40"><path d="M512 85.333333C276.266667 85.333333 85.333333 276.266667 85.333333 512a426.410667 426.410667 0 0 0 291.754667 404.821333c21.333333 3.712 29.312-9.088 29.312-20.309333 0-10.112-0.554667-43.690667-0.554667-79.445333-107.178667 19.754667-134.912-26.112-143.445333-50.133334-4.821333-12.288-25.6-50.133333-43.733333-60.288-14.933333-7.978667-36.266667-27.733333-0.554667-28.245333 33.621333-0.554667 57.6 30.933333 65.621333 43.733333 38.4 64.512 99.754667 46.378667 124.245334 35.2 3.754667-27.733333 14.933333-46.378667 27.221333-57.045333-94.933333-10.666667-194.133333-47.488-194.133333-210.688 0-46.421333 16.512-84.778667 43.733333-114.688-4.266667-10.666667-19.2-54.4 4.266667-113.066667 0 0 35.712-11.178667 117.333333 43.776a395.946667 395.946667 0 0 1 106.666667-14.421333c36.266667 0 72.533333 4.778667 106.666666 14.378667 81.578667-55.466667 117.333333-43.690667 117.333334-43.690667 23.466667 58.666667 8.533333 102.4 4.266666 113.066667 27.178667 29.866667 43.733333 67.712 43.733334 114.645333 0 163.754667-99.712 200.021333-194.645334 210.688 15.445333 13.312 28.8 38.912 28.8 78.933333 0 57.045333-0.554667 102.912-0.554666 117.333334 0 11.178667 8.021333 24.490667 29.354666 20.224A427.349333 427.349333 0 0 0 938.666667 512c0-235.733333-190.933333-426.666667-426.666667-426.666667z" fill="#000000" p-id="10617"></path></svg>
            <!-- github图标 -->
            <svg t="1648883835290" id="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12499" width="40" height="40"><path d="M347.729118 353.0242c-16.487119 0-29.776737 13.389539-29.776737 29.776737S331.241998 412.677596 347.729118 412.677596s29.776737-13.389539 29.776737-29.776737-13.289617-29.876659-29.776737-29.876659zM577.749415 511.800156c-13.689305 0-24.880562 11.091335-24.880563 24.880562 0 13.689305 11.091335 24.880562 24.880563 24.880562 13.689305 0 24.880562-11.191257 24.880562-24.880562s-11.191257-24.880562-24.880562-24.880562zM500.909446 412.677596c16.487119 0 29.776737-13.389539 29.776737-29.776737s-13.389539-29.776737-29.776737-29.776737c-16.487119 0-29.776737 13.389539-29.776737 29.776737s13.289617 29.776737 29.776737 29.776737zM698.455113 511.600312c-13.689305 0-24.880562 11.091335-24.880562 24.880562 0 13.689305 11.091335 24.880562 24.880562 24.880562 13.689305 0 24.880562-11.091335 24.880562-24.880562-0.099922-13.689305-11.191257-24.880562-24.880562-24.880562z" fill="#00C800" p-id="12500"></path><path d="M511.601093 0.799375C229.12178 0.799375 0.000781 229.820453 0.000781 512.399688s229.021077 511.600312 511.600312 511.600312 511.600312-229.021077 511.600312-511.600312S794.180328 0.799375 511.601093 0.799375z m-90.229508 634.504294c-27.37861 0-49.361436-5.595628-76.839969-10.991413l-76.640125 38.469945 21.882904-65.948477c-54.957065-38.370023-87.73146-87.831382-87.73146-148.084309 0-104.318501 98.722873-186.554254 219.32865-186.554255 107.815769 0 202.34192 65.648712 221.327088 153.979703-6.994536-0.799375-13.989071-1.298985-21.083529-1.298985-104.118657 0-186.454333 77.739266-186.454332 173.564403 0 15.98751 2.498048 31.275566 6.794692 45.964091-6.794692 0.599532-13.689305 0.899297-20.583919 0.899297z m323.547228 76.839969l16.48712 54.757221-60.153006-32.874317c-21.882904 5.495706-43.965652 10.991413-65.848555 10.991413-104.318501 0-186.554254-71.344262-186.554255-159.175644 0-87.631538 82.135831-159.175644 186.554255-159.175644 98.523029 0 186.254489 71.444184 186.254488 159.175644 0.099922 49.461358-32.774395 93.227166-76.740047 126.301327z" fill="#00C800" p-id="12501"></path></svg>
            <!-- 微信图标 -->
            <svg t="1648883886674" id="icon3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14732" width="40" height="40"><path d="M509.437963 961.612539c-28.600245-22.003876-76.404745-41.006788-149.818114-34.199489-136.414445 12.598298-170.019494 50.815052-170.019494 73.605124s76.404745 21.601191 170.019494 21.601191a959.407357 959.407357 0 0 0 134.813292-6.999055 144.190107 144.190107 0 0 1 30.201398-1.198468 881.746618 881.746618 0 0 0 139.981087 7.99618c93.605161 0 170.019494 1.208056 170.019494-21.591603 0-19.0125-33.55711-61.217756-170.019494-73.614711-85.014541-7.99618-131.821915 12.598298-155.225602 34.400831z m0 0" fill="#F9AE08" p-id="14733"></path><path d="M361.82503 35.51301C166.004913 143.32721 191.000166 430.154209 191.000166 430.154209s-26.999092 61.610854-39.002949 92.406693c-13.796766 36.203328-38.005824 109.012668-38.005824 109.012668a585.705795 585.705795 0 0 0-27.804463 104.007865c-10.594459 60.613728-4.995215 108.216885 7.603083 105.215921 25.004841-5.752647 89.166035-111.81229 89.166034-111.81229s-5.196558 134.611949 111.409605 216.826868c95.81993 72.607998 210.230499 67.612782 210.230499 67.612783h12.799641s116.213065 6.001929 212.22475-66.807412c116.61575-82.214919 111.409605-216.826868 111.409604-216.826868s64.237896 106.011704 89.166035 111.81229c12.598298 3.000964 18.216717-44.602193 7.603082-105.206334a585.379811 585.379811 0 0 0-27.804462-104.007865s-24.209058-72.809341-38.005824-109.012668c-11.802515-31.006769-39.002949-92.41628-39.002949-92.41628s25.004841-286.836587-170.815277-394.650787c-12.003858-5.397901-23.403687-10.604047-35.004859-14.602137-60.60414-23.202345-155.216015-37.603138-265.427151 13.806354z m0 0" p-id="14734"></path><path d="M281.000334 819.397508c32.003895 95.01456 104.813236 157.823881 231.831691 157.823881 195.014747-7.40174 250.825014-144.621556 250.825014-323.039915a407.718884 407.718884 0 0 0-15.196577-111.016507c-90.009756-3.000964-324.832823-3.000964-470.451504-3.000964a406.098555 406.098555 0 0 0-16.001948 114.218814c-0.201343 59.808357 2.799622 116.970497 19.002912 165.014691z m89.616659-608.476691c0 44.736421 25.215771 81.035626 56.375945 81.054802s56.423883-36.222503 56.433471-80.968512v-0.08629c0-44.736421-25.225359-81.026039-56.375945-81.045214s-56.423883 36.222503-56.433471 80.968512z m169.223711 0c0 44.736421 25.254122 81.006863 56.404708 81.006863s56.404708-36.270442 56.404708-81.006863-25.254122-81.006863-56.404708-81.006863-56.404708 36.270442-56.404708 81.006863z m0 0" fill="#FFFFFF" p-id="14735"></path><path d="M420.425332 216.357069c0 17.890733 10.63281 32.416168 23.777609 32.435343s23.81596-14.477496 23.825548-32.368229v-0.067114c0-17.900321-10.63281-32.416168-23.787197-32.435344s-23.806372 14.477496-23.825548 32.368229z m132.416355 3.835098s-0.958775 11.409417 10.000019 10.201361a36.184152 36.184152 0 0 1 30.805427-16.596387s19.396009 0 25.196595 8.005767a13.547485 13.547485 0 0 0 12.809229-12.003857s-10.000019-16.999073-39.405635-13.796766a55.052836 55.052836 0 0 0-39.396047 24.19947z m0 0" p-id="14736"></path><path d="M319.619774 363.346797s-10.997144-6.404614 2.598279-14.803479c13.605011-8.628971 56.203365-31.208112 189.022406-32.40658 124.640694-1.198468 177.373295 21.802534 192.426055 35.206202 5.397901 3.99809 3.99809 6.203271 3.394062 8.398865-3.394062 11.39983-109.012668 63.001077-192.627398 60.60414a352.263363 352.263363 0 0 1-194.822992-57.008735z m0 0" fill="#F9AE08" p-id="14737"></path><path d="M492.237547 475.57136c-182.627379-6.807299-302.196156-45.608906-302.196156-45.608906s-17.200416 39.396047-24.611743 57.804519c-7.99618 19.60694-21.802534 56.404708-21.802533 56.404708s101.409586 31.409455 166.213158 38.801606v148.610058a485.600142 485.600142 0 0 0 140.211193 3.835098V599.37792s221.026301 15.800605 429.252961-55.004897a1354.144434 1354.144434 0 0 0-23.806372-61.812196c-13.998109-33.998146-22.598317-51.399904-22.598317-51.399905s-177.373295 51.601247-340.643016 44.410438z m0 0" fill="#E82220" p-id="14738"></path></svg>
            <!-- qq图标 -->
        </div>
    </div>
    <div id="box4"><!-- 下部分 -->
        <h2 id="txt4">@CN.12306</h2>
        <h2 id="txt5">关于我们</h2>
        <h2 id="txt6">在线自助服务</h2>
    </div>
    <div id="box5"><!-- 注册页 -->
        <h2 id="txt7">注册</h2>
        <input type="text"    id="input3"    placeholder="请输入账号/用户名">
        <input type="password"id="input4"    placeholder="请输入密码">
        <input type="text"    id="input5"    placeholder="请输入验证码">
        <button id="btn3">确认</button>
        <button id="btn4">X</button>
    </div>

    <script>// 控制登录注册页逻辑与登录/注册按钮
        // 获取dom元素
        var input1 = document.getElementById('input1');
        var input2 = document.getElementById('input2');
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        var btn3 = document.getElementById('btn3');
        var box5 = document.getElementById('box5');
        var btn4 = document.getElementById('btn4');
        let fun2_1 = () =>{// 判断登录页输入框是否有值
            if(input1.value==''||input2.value==''){
                alert('请输入账号或密码');
                // 用户初始账户密码
            }else if(input1.value!=1442688044||input2.value!='813813813@'){
                alert('账号或密码错误！');
            }
            else if(input1.value==1442688044&&input2.value=='813813813@'){
                location.href="./自制12306首页.html";
            }
        } 
        btn2.onclick = fun2_1;
        let fun2_2 = () =>{// 弹出注册页
            box5.style.display='block';
        }
        btn1.onclick = fun2_2;
        let fun2_3 = () =>{// 判断注册页是否输入了值
            if(input3.value==''||input4.value==''){
                alert('请输入账号或密码');
            }else if(input5.value==''){
                alert('请输入验证码');
            }else if(input3.value!=''&&input4.value!=''&&input5.value!=''){
                box5.style.display='none';
            }
        }
        btn3.onclick = fun2_3;
        let fun2_4 = () =>{// 逻辑判断注册的账号密码是否与登录的一致
            if(input1.value==input3.value&&input2.value==input4.value&&input5.value!=''){
                location.href="./自制12306首页.html";
            }else if(input1.value==''||input2.value==''){
                alert('请输入账号或密码');
            }else if(input1.value!=input3.value||input2.value!=input4.value){
                alert('账号或密码错误！');
            }
        }
        btn2.onclick = fun2_4;
        let fun2_5 = () =>{
            if(btn4.style.background==''){
                btn4.style.background='red';
            }else if(btn4.style.background=='red'){
                btn4.style.background='';
            }
        }
        btn4.onmouseover = fun2_5;// 注册页关闭按钮
        let fun2_6 = () =>{
            box5.style.display='none';
        }
        btn4.onclick = fun2_6;
        let fun2_7 = (e) =>{//给回车键（ASCII码为13）绑定按下事件，按下调用函数2_1
            if(e.which==13){
                fun2_1();
            }   
        }
        document.onkeydown = fun2_7;
    </script>
    <script>//控制第三方登录的图标显隐
        var a2 = document.getElementsByTagName('a')[1];
        var svgArr = [icon1,icon2,icon3];
        let fun3_1 = () =>{
            for(let i=0;i<svgArr.length;i++){
                svgArr[i].style.display='block';
            }
        }
        a2.onclick = fun3_1;
        // let fun2_2 = () =>{
        //     for(let i=0;i<svgArr.length;i++){
        //         svgArr[i].style.display='none';
        //     }
        // }
        // a2.onmouseleave = fun2_2;
    </script>
</body>
</html>